<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <!-- 商品 ID -->
              <el-form-item label="商品 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <!-- 商品名称 -->
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <!-- 所属分类 -->
              <el-form-item label="所属分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
              <!-- 商品价格 -->
              <el-form-item label="商品价格">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <!-- 商品图片 -->
              <el-form-item label="商品图片">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="Api + props.row.imgUrl"
                  fit="fill"
                ></el-image>
              </el-form-item>
              <!-- 创建时间 -->
              <el-form-item label="创建时间">
                <span>{{ props.row.ctime | normalizeDate }}</span>
              </el-form-item>
              <!-- 商品评价 -->
              <el-form-item label="商品评价">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <!-- 商品销量 -->
              <el-form-item label="商品销量">
                <span>{{ props.row.sellCount }}</span>
              </el-form-item>
              <!-- 商品描述 -->
              <el-form-item label="商品描述">
                <span>{{ props.row.goodsDesc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- 商品名称 -->
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <!-- 所属分类 -->
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <!-- 商品价格 -->
        <el-table-column label="商品价格" prop="price"> </el-table-column>
        <!-- 商品图片 -->
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="Api + scope.row.imgUrl"
              fit="fill"
            ></el-image>
          </template>
        </el-table-column>
        <!-- 商品描述 -->
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <!-- 删除 -->
            <!-- confirm 确定按钮触发事件 -->
            <!-- cancel 取消按钮触发事件 -->
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              @confirm="handleDelete(scope.row)"
              @cancel="handleCancelDelete()"
              title="这一段内容确定删除吗？"
            >
            <!-- 删除 -->
              <el-button slot="reference" type="danger" size="mini"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagin.currentPage"
        :page-sizes="[3, 5, 10]"
        :page-size="pagin.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { goodsList, goodsDel } from '../../api/goods';
export default {
  data () {
    return {
      // 服务器地址
      Api: "http://127.0.0.1:5000",
      // 商品数据
      tableData: [],
      // 当前页和当前页的条数  数据
      pagin: {
        currentPage: 1,
        pageSize: 3,
      },
      // 总条数
      total: 0,
    }
  },
  methods: {
    //获取数据
    async getData () {
      let res = await goodsList({ ...this.pagin })
      let { total, data } = res.data
      if (data.length == 0 && this.pagin.currentPage != 1) {
        this.pagin.currentPage -= 1
        this.getData()
        return
      }
      this.total = total
      this.tableData = data
    },
    // 改变时会触发	每页条数
    handleSizeChange (val) {
      this.pagin.pageSize = val
      this.getData()
    },
    // 改变时会触发	当前页
    handleCurrentChange (val) {
      this.pagin.currentPage = val
      this.getData()
    },
    // 编辑
    handleEdit (row) {
      this.$router.push({ path: '/goods/goods-edit', query: { id: row } })
    },
    // 删除
    async handleDelete (row) {
      let res = await goodsDel({ id: row.id })
      let { code, msg } = res.data
    },
    // 取消删除
    handleCancelDelete () {
      this.$message('已取消删除')
    },
  },
  created () {
    this.getData();

  },
}
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/deep/.el-button {
  margin-right: 5px;
}
</style>